<template id="sjld">
	<el-form :model="formData" ref="elform" :rules="validatoRule" label-width="120px" :inline="true" >
		<el-form-item label="表名" prop="name">
			<el-input size="small" v-model="formData.name" auto-complete="off" />
		</el-form-item>
		<el-form-item label="表描述" prop="description">
			<el-input size="small" v-model="formData.description" />
		</el-form-item>	
		<el-form-item label="表类型" >
			<el-select size="small" v-model="formData.tableType" placeholder="请选择" >
			    <el-option
			      v-for="item in dict.tableTypeOptions"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="表单类型">
			<el-select size="small" v-model="formData.formType" placeholder="请选择">
			    <el-option
			      v-for="item in dict.formTypeOptions"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<!-- <el-form-item label="PC表单风格">
			<el-select size="small" v-model="formData.pcStyle" placeholder="请选择">
			    <el-option
			      v-for="item in dict.tablePcStyle"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<el-form-item label="手机表单风格">
			<el-select size="small" v-model="formData.mobileStyle" placeholder="请选择">
			    <el-option
			      v-for="item in dict.tableMobileStyle"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item> -->
		<el-form-item label="是否分页">
			<el-select size="small" v-model="formData.isPage" placeholder="请选择">
			    <el-option
			      v-for="item in dict.yesorno"
			      :key="item.value"
			      :label="item.label"
			      :value="item.value">
			    </el-option>
			</el-select>
		</el-form-item>
		<el-tabs type="border-card">
		  	<el-tab-pane label="数据库属性">
		  		<el-row>
					<el-button size="small" @click="addColumn">增加</el-button>
					<el-button size="small" type="danger" @click="deleteColumn">删除</el-button>
				</el-row>
				<template>
						<el-table
						    :data="formData.sysTableColumnList"
						    style="width: 100%"
						    @selection-change="selsChange">
						    <el-table-column type="selection" width="55"></el-table-column>
						    <el-table-column label="序号" width="65" prop="columnIndex"> </el-table-column>
						    <el-table-column label="字段名称" width="180">
						      	<template slot-scope="scope">
						           <el-input size="small" v-model="scope.row.name" ></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="字段备注" width="180">
						      	<template slot-scope="scope">
						           <el-input size="small" v-model="scope.row.description"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="字段长度" width="100">
						      	<template slot-scope="scope">
						           <el-input size="small" v-model="scope.row.columnLength"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="小数点" width="100">
						      	<template slot-scope="scope">
						           <el-input size="small" v-model="scope.row.columnDecimal"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="默认值" width="100">
						      	<template slot-scope="scope">
						           <el-input size="small" v-model="scope.row.defaultValue"></el-input>
						       	</template>
						    </el-table-column>
						    <el-table-column label="字段类型" width="150">
						      	<template slot-scope="scope">
						            <el-select size="small" v-model="scope.row.columnType" placeholder="请选择">
									    <el-option
									      v-for="item in dict.tableColumnType"
									      :key="item.value"
									      :label="item.label"
									      :value="item.value">
									    </el-option>
								  	</el-select>
						       	</template>
						    </el-table-column>
						    <el-table-column label="是否主键" width="70">
						      	<template slot-scope="scope">
								  	<el-checkbox v-model="scope.row.isPrimeryKey=='true'"></el-checkbox>
						       	</template>
						    </el-table-column>
						    <el-table-column label="允许空值" width="70">
						      	<template slot-scope="scope">
								  	<el-checkbox v-model="scope.row.isAllowNull=='true'?true: false"></el-checkbox>
						       	</template>
						    </el-table-column>
						</el-table>
					</template>  
		  	</el-tab-pane>
		  	<el-tab-pane label="表单属性">配置管理</el-tab-pane>
		</el-tabs> 
		
	</el-form>
</template>
<script>
	var dict = require('../json/dict.json')
    export default {
        data() {
			return {
				sels : [],
				dict: dict
				// validatoRule: {
				// 	name: [
			 //            { required: true, message: '请输入', trigger: 'blur' },
			 //            { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
			 //        ],
				// }
			}
        },
        props: {
            formData:Object,
            validatoRule: Object,
            tableColumnType: Array,
            tableTypeOptions: Array,
            formTypeOptions: Array,
            tablePcStyle: Array,
            tableMobileStyle: Array,
            addColumn: Function,
            deleteColumn: Function

        },
        methods: {
        	selsChange: function (sels){
        		this.sels = sels;
        	},
        	getForm: function(){
        		return this.$refs.elform;
        	}
        },
        mounted(){
           
        },
        computed: {
        }
    }
</script>
<style >
.el-row {
	line-height: 30px;
    margin-bottom: 10px;
}
.el-table-column {
	margin: 0px;
}
</style>